<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import mapData from "@/assets/china.json";
import dot from "@/assets/bg.png";

let myChart;
let data = [
  {
    name: "北京市",
    value: [
      116.46, // 地理坐标，经度
      39.92, // 地理坐标，纬度
      300 // 其它维度 - 客流量
    ],
    symbolSize: 10
  },
  {
    name: "河北省",
    value: [114.502461, 38.045474, 50],
    symbolSize: 3
  },
  {
    name: "山西省",
    value: [112.549248, 37.857014, 200],
    symbolSize: 8
  },
  {
    name: "安徽省",
    value: [117.283042, 31.86119, 150],
    symbolSize: 6
  }
];
onMounted(() => {
  myChart = echarts.init(document.getElementById("map"));
  // 注册的地图的名称
  echarts.registerMap("china", mapData);

  myChart.setOption({
    tooltip: {
      show: true,
      backgroundColor: "#124166",
      textStyle: {
        color: "#fff",
        fontStyle: "normal",
        fontWeight: "normal",
        fontFamily: "sans-serif",
        fontSize: 10
      },
      borderColor: "#ccc",
      formatter: ({ name, data }) => {
        let num = data ? data.value[2] : "未统计";
        return `<strong>${name}仓库</strong><br/><span>订单量:</span><br/><span>${num}</span>`;
      }
    },
    geo: {
      data: data,
      tooltip: {
        show: false
      },
      map: "china",
      // aspectScale: 0.75, //长宽比
      zoom: 1.2,
      // 鼠标移入 相对于的层次时 字体放大
      roam: false,
      layoutCenter: ["50%", "68%"],
      layoutSize: "100%",
      emphasis: {
        itemStyle: {
          areaColor: "#007ABA"
        },
        label: {
          show: false
        },
        selectorLabel: {
          show: false
        }
      },
      itemStyle: {
        areaColor: "#007ABA",
        // borderColor: "#012E58",
        shadowColor: "rgb(58,115,192)",
        shadowOffsetX: 0,
        shadowOffsetY: 8
        // shadowBlur: 1, //
      },
      regions: [
        {
          name: "南海诸岛",
          itemStyle: {
            areaColor: "rgba(0, 10, 52, 1)",

            borderColor: "rgba(0, 10, 52, 1)",

            opacity: 0,
            label: {
              show: false,
              color: "#009cc9"
            }
          }
        }
      ]
    },
    series: [
      {
        map: "china",
        type: "map",
        zoom: 1.2,
        // 鼠标移入 相对于的层次时 字体放大
        roam: false,
        layoutCenter: ["50%", "65%"],
        layoutSize: "100%",
        rippleEffect: {
          number: 2, //波纹的数量
          scale: 4 //动画中波纹的最大缩放比例
        },

        label: {
          formatter: p => {
            switch (p.name) {
              case "内蒙古自治区":
                p.name = "内蒙古";
                break;
              case "西藏自治区":
                p.name = "西藏";
                break;
              case "河北省":
                p.name = "";
                break;
              case "天津市":
                p.name = "";
                break;
              case "宁夏回族自治区":
                p.name = "宁夏";
                break;
              case "广西壮族自治区":
                p.name = "广西";
                break;
              case "香港特别行政区":
                p.name = "香港";
                break;
              case "澳门特别行政区":
                p.name = "澳门";
                break;
            }
            return p.name;
          },
          fontSize: 6,

          show: true,
          color: "#B5F8FF",
          backgroundColor: "#01478D",
          padding: [3, 5, 3, 5],
          borderRadius: 5
        },
        itemStyle: {
          show: true,
          areaColor: {
            image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
            repeat: "repeat" // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
          },
          borderWidth: 2,
          borderColor: "#B5F8FF"
        },
        // 鼠标移入 相对于的层次时 字体放大
        emphasis: {
          itemStyle: {
            areaColor: "none"
          },
          label: {
            fontSize: 15,
            color: "#B5F8FF"
          }
        },
        data: data
      },
      {
        //  name: 'Top 5',
        type: "effectScatter",
        coordinateSystem: "geo",
        data: data,
        symbolSize: function(val) {
          return val[2] / 10;
        },
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke"
        },
        label: {
          show: false
        },

        zlevel: 2
      }
    ]
  });
});

onBeforeUnmount(() => {
  myChart.dispose();
});
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 670px;
}
</style>
